<template>
	<view class="paymentSuccess">
		<view class="topBg">
			<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/successBg.png" class="icon"></image>
			<view class="desBox">
				<view class="p1">支付成功!</view>
				<view class="p2">感谢您的购买</view>
			</view>
		</view>
		<view class="successCont">
			<view class="price">￥<text>{{price}}</text></view>
			<view class="paymentNo">订单编号：{{paymentNo}}</view>
			<view class="odatetime">下单时间：{{odatetime}}</view>
			<view class="type">支付方式：{{type == 0 ? '余额' : '微信支付'}}</view>
		</view>
		<button class="toMy" @click="toMy">订单详情</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				href: 'https://uniapp.dcloud.io/component/README?id=uniui',
				price: null,
				odatetime: null,
				paymentNo: null,
				type: null
			}
		},
		methods: {
			toMy() {
				uni.reLaunch({
					url: '/pages/my/my'
				})
			}
		},
		onLoad(options) {
			console.log(options)
			this.price = options.price
			this.odatetime = options.odatetime
			this.paymentNo = options.paymentNo
			this.type = options.type
		}
	}
</script>

<style lang="less">
	.paymentSuccess {
		.topBg {
			height: 336rpx;
			background: #E8232F;
			padding-top: 80rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;

			image {
				display: block;
				width: 138rpx;
				height: 112rpx;
				margin-right: 16rpx;
			}

			.desBox {
				color: #fff;

				.p1 {
					font-size: 36rpx;
					margin-top: 23rpx;
				}

				.p2 {
					font-size: 26rpx;
				}
			}
		}

		.successCont {
			width: 709rpx;
			height: 384rpx;
			background: url(https://cloudcdn.noitom.com.cn/noitom2/billiard/successBoxBg.png) no-repeat center;
			background-size: 100% 100%;
			margin: -70rpx auto 0;
			padding: 0 45rpx;
			box-sizing: border-box;
			line-height: 1;

			.price {
				text-align: center;
				font-size: 24rpx;
				padding-top: 62rpx;
				padding-bottom: 45rpx;
				margin-bottom: 30rpx;
				border-bottom: 1px solid #E2E2E2;

				text {
					font-size: 48rpx;
					font-weight: 500;
				}
			}

			.paymentNo,
			.odatetime,
			.type {
				font-size: 24rpx;
				color: #5B5B5B;
				margin-bottom: 46rpx;
			}
		}

		.toMy {
			width: 477rpx;
			height: 99rpx;
			border: 1px solid #E8232F;
			border-radius: 49rpx;
			margin: 115rpx auto 0;
			text-align: center;
			line-height: 96rpx;
			font-size: 32rpx;
			color: #E8232F;
		}
	}
</style>
